<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
	</head>
	<body>
		<div id="md">
			<!-- 数据提取,用于提取对象的属性值和函数的返回值 -->
			<p>{{name}}</p>
			<p>{{age}}</p>
			<p>{{gender}}</p>

			<p>{{study()}}</p>
		</div>

		<script>
			var student = {
				name: "jack",
				age: 25,
				gender: "男"
			};

			//每个 Vue 应用都需要通过实例化 Vue 
			var app = new Vue({
				//绑定元素
				el: '#md',
				//定义属性
				data: student,
				//定义函数
				methods: {
					study: function() {
						return "学生在学习...";
					}
				}
			});

			//直接修改属性值,页面数据会发生同等的变化
			app.name = "rose";
			
			//Vue实例提供了实例属性和方法,他们都是一个$为前缀的,以便和用户定义的属性和方法区分
			//vue获取页面元素,等价于document.getElementById("md");,也等价于jquery $("#md")
			//alert(app.$el);
		</script>
	</body>
</html>
